import React, {useState, useRef, useEffect} from 'react';
import {message, Button, Tabs, Divider,Popconfirm} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {connect} from 'umi';
import {queryPersonalAssessList} from '../../service';
import {assessPeriodList,assessGradeList} from "@/utils/constant";
import moment from 'moment';

const {TabPane} = Tabs;

const TableList = () => {
  const actionRef = useRef();
  const actionRef2 = useRef();

  const handleChangTabIndex = (key) => {
    if (key === '1') {
      actionRef.current && actionRef.current.reload();
    } else {
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '公司',
      dataIndex: 'orgname',
    },
    {
      title: '部门',
      dataIndex: 'unitname',
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
    },
    {
      title: '考核年度',
      dataIndex: 'assessYear',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY') : '';
      },
    },
    {
      title: '考核周期',
      dataIndex: 'cycle',
      hideInSearch: true,
      render: (text) => {
        return assessPeriodList.find((item) => item.value === text)?.label;
      }
    },
    {
      title: '考核级别',
      dataIndex: 'grade',
      hideInSearch: true,
      render: (text) => {
        return assessGradeList.find((item) => item.value === text)?.label;
      }
    },
  ];


  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="季度" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryPersonalAssessList(params, 'year')}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="月度" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryPersonalAssessList(params, 'month')}
            columns={columns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(({}) => ({}))(TableList)
